<template>
  <Panel title="数据点" :data="data">
    <template #dataKey>
      <input
        :value="dataKey"
        type="text"
        class="vc-border vc-border-gray-400 vc-border-solid vc-rounded vc-py-1 vc-px-2 focus:vc-outline-blue"
        @input="changeDataKey"
      />
    </template>
    <template #rotate>
      <button class="vc-btn vc-mr-2" @click="setRotate(0)">重置</button>
      <button class="vc-btn" title="顺时针旋转90°" @click="setRotate(clockwise90(rotate))">
        <Icon name="rotate" />
      </button>
    </template>
    <template #hide>
      <button v-if="!hideValue" class="vc-btn" @click="setPartHide(!hideLabel, LabelValuePart.Label)">
        {{ hideLabel ? "显示label" : "隐藏label" }}
      </button>
      <button v-if="!hideLabel" class="vc-btn" @click="setPartHide(!hideValue, LabelValuePart.Value)">
        {{ hideValue ? "显示value" : "隐藏value" }}
      </button>
      <button v-if="!hideValue" class="vc-btn" @click="setPartHide(!hideUnit, LabelValuePart.Unit)">
        {{ hideValue ? "显示unit" : "隐藏unit" }}
      </button>
    </template>
    <template #labelCssProps>
      <FontProps v-model:value="innerLabelCssProps" />
    </template>
    <template #valueCssProps>
      <FontProps v-model:value="innerValueCssProps" />
    </template>
    <template #unitCssProps>
      <FontProps v-model:value="innerUnitCssProps" :hide-bg-border="true" />
    </template>
    <template #position>
      <button
        class="vc-btn vc-mr-2"
        :class="{ 'vc-btn-disable': hideValue || position === 'vertical' }"
        :disabled="hideValue || position === 'vertical'"
        @click="setPosition('vertical')"
      >
        垂直
      </button>
      <button
        class="vc-btn"
        :class="{ 'vc-btn-disable': hideValue || position === 'horizontal' }"
        :disabled="hideValue || position === 'horizontal'"
        @click="setPosition('horizontal')"
      >
        水平
      </button>
    </template>
  </Panel>
</template>
<script setup lang="ts">
import Icon from "/@/components/base/Icon.vue";
import Panel from "./Panel.vue";
import type { AttrItem, LabelValuePosition } from "./types";
import { computed, CSSProperties, nextTick, ref, watch } from "vue";
import FontProps from "./FontProps.vue";
import { clockwise90 } from "/@/utils/common";
import { LabelValuePart } from "/@/components/types";

//与LabelValuePanelInfo对应
const props = defineProps<{
  labelCssProps: CSSProperties;
  valueCssProps: CSSProperties;
  unitCssProps: CSSProperties;
  rotate: number;
  position: LabelValuePosition;
  hideValue: boolean;
  hideLabel: boolean;
  hideUnit: boolean;
  dataKey: string | null;
  setRotate: (deg: number) => void;
  setCssProps: (props: CSSProperties, labelValuePart: LabelValuePart) => void;
  setPosition: (pos: LabelValuePosition) => void;
  setPartHide: (isHide: boolean, labelValuePart: LabelValuePart) => void;
  setDataKey: (val: string | null) => void;
}>();

const innerLabelCssProps = ref<CSSProperties>(props.labelCssProps);
const innerValueCssProps = ref<CSSProperties>(props.valueCssProps);
const innerUnitCssProps = ref<CSSProperties>(props.unitCssProps);
let triggerInnerWatch = true;
watch(
  innerLabelCssProps,
  (v) => {
    if (!triggerInnerWatch) return;
    props.setCssProps({ ...v }, LabelValuePart.Label);
  },
  {
    deep: true,
  }
);
watch(
  innerValueCssProps,
  (v) => {
    if (!triggerInnerWatch) return;
    props.setCssProps({ ...v }, LabelValuePart.Value);
  },
  {
    deep: true,
  }
);
watch(
  innerUnitCssProps,
  (v) => {
    if (!triggerInnerWatch) return;
    props.setCssProps({ ...v }, LabelValuePart.Unit);
  },
  {
    deep: true,
  }
);

watch(
  () => props.labelCssProps,
  (v) => {
    triggerInnerWatch = false;
    innerLabelCssProps.value = v;
    nextTick(() => {
      triggerInnerWatch = true;
    });
  }
);

watch(
  () => props.valueCssProps,
  (v) => {
    triggerInnerWatch = false;
    innerValueCssProps.value = v;
    nextTick(() => {
      triggerInnerWatch = true;
    });
  }
);

watch(
  () => props.unitCssProps,
  (v) => {
    triggerInnerWatch = false;
    innerUnitCssProps.value = v;
    nextTick(() => {
      triggerInnerWatch = true;
    });
  }
);

function removeBySlotName(arr: AttrItem[], slotName: string) {
  const index = arr.findIndex((el) => el.slotName === slotName);
  if (index >= 0) {
    arr.splice(index, 1);
  }
}
const data = computed<AttrItem[]>(() => {
  const re: AttrItem[] = [
    { name: "绑定数据键值", slotName: "dataKey" },
    { name: "隐藏", slotName: "hide" },
    { name: "label字体", slotName: "labelCssProps" },
    { name: "value字体", slotName: "valueCssProps" },
    { name: "unit字体", slotName: "unitCssProps" },
    { name: "旋转角度(顺时针方向)", value: Math.round(props.rotate), unit: "°", slotName: "rotate" },
    { name: "布局方向", slotName: "position" },
  ];
  if (props.hideLabel) {
    removeBySlotName(re, "labelCssProps");
  }
  if (props.hideValue) {
    removeBySlotName(re, "valueCssProps");
    removeBySlotName(re, "unitCssProps");
  }
  if (props.hideUnit) {
    removeBySlotName(re, "unitCssProps");
  }
  return re;
});

function changeDataKey(e) {
  props.setDataKey(e.target.value);
}
</script>
